<template>
  <div class="containner">
    <div class="steprow">
      <a-steps :current="current" labelPlacement="vertical" size="small">
        <a-step>
          <!-- <span slot="title">Finished</span> -->
          <template #title>
            <span :class="current == 0 ? 'activeColor' : ''">基础信息</span></template
          >
          <template #description>
            <span :class="current == 0 ? 'activeColor' : ''">请维护物模型基础信息</span>
          </template>
        </a-step>
        <a-step>
          <template #title>
            <span :class="current == 1 ? 'activeColor' : ''">属性配置</span></template
          >
          <template #description>
            <span :class="current == 1 ? 'activeColor' : ''">配置物模型属性</span>
          </template>
        </a-step>
      </a-steps>
    </div>
    <basicinfoModel v-if="current == 0" @nextStep="nextStep" :info="info" />
    <attrconfigModel
      v-else
      @backStep="backStep"
      :devicemodeid="formState.device_mode_id"
      :protocoltype="formState.protocol_type"
      :driveid="formState.drive_id"
    />
  </div>
</template>
<script>
  import { defineComponent, reactive, ref } from 'vue';
  import basicinfoModel from './basicinfoModel.vue';
  import attrconfigModel from './attrconfigModel.vue';
  import { useRouter } from 'vue-router';
  export default defineComponent({
    components: { basicinfoModel, attrconfigModel },
    setup(_) {
      const current = ref(0);
      const router = useRouter();
      const info = ref();
      info.value = router.currentRoute.value.query.data;
      const formState = reactive({
        name: '',
        beizhu: '',
        device_mode_id: '',
        protocol_type: '',
        drive_id: '',
      });
      const rules = {
        name: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
      };
      //上一步
      const backStep = () => {
        current.value = 0;
      };
      //下一步
      const nextStep = (e) => {
        formState.device_mode_id = e.device_mode_id;
        formState.connect_type = e.connect_type;
        formState.drive_id = e.drive_id;
        current.value = 1;
      };
      return {
        current,
        formState,
        rules,
        labelCol: { span: 3 },
        wrapperCol: { span: 7 },
        nextStep,
        info,
        backStep,
      };
    },
  });
</script>
<style lang="less" scoped>
  .containner {
    background-color: #fff;
    overflow: hidden;
    height: 100%;
    .steprow {
      padding: 0px 25%;
      margin: 30px 0px 40px;
    }
    .activeColor {
      color: #0960bd;
    }
  }
  /deep/ .ant-steps-small .ant-steps-item-description {
    width: 140px;
  }
</style>
